<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.galleriffic.min.js"></script>
<link href="estilo/villas.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
// Initially set opacity on thumbs and add
			// additional styling for hover effect on thumbs
			var onMouseOutOpacity = 0.67;
			$('#thumbsContainerSel ul.thumbs li').css('opacity', onMouseOutOpacity)
				.hover(
					function () {
						$(this).not('.selected').fadeTo('fast', 1.0);
					}, 
					function () {
						$(this).not('.selected').fadeTo('fast', onMouseOutOpacity);
					}
				);

$(document).ready(function() {
	
    var gallery = $('#img_villa').galleriffic('#thumbsContainerSel', {
        delay:                  3000,
        numThumbs:              8,
        preloadAhead:           -1, // Set to -1 to preload all images
        enableTopPager:         false,
        enableBottomPager:      false,
        imageContainerSel:      '#imageContainerSel',
        controlsContainerSel:   '#controlsContainerSel',
        captionContainerSel:    '#captionContainerSel',
        loadingContainerSel:    '#loadingContainerSel',
        renderSSControls:       false,
        renderNavControls:      false,
        playLinkText:           'reproducir',
        pauseLinkText:          'pausa',
        prevLinkText:           '< previa',
        nextLinkText:           'siguiente >',
        nextPageLinkText:       'Next &rsaquo;',
        prevPageLinkText:       '&lsaquo; Prev',
        enableHistory:          false,
        autoStart:              false,
        onChange:               function(prevIndex, nextIndex) {
						$('#thumbsContainerSel ul.thumbs').children()
							.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
							.eq(nextIndex).fadeTo('fast', 1.0);
					},
					onTransitionOut:        function(callback) {
						$('#imageContainerSel, #captionContainerSel').fadeOut('fast', callback);
					},
					onTransitionIn:         function() {
						$('#imageContainerSel, #captionContainerSel').fadeIn('fast');
					},
					onPageTransitionOut:    function(callback) {
						$('#thumbsContainerSel ul.thumbs').fadeOut('fast', callback);
					},
					onPageTransitionIn:     function() {
						$('#thumbsContainerSel ul.thumbs').fadeIn('fast');
					}

    });
});
</script>
<?php 
	$qry = "select imagen from `libro_imagen` where libro_id=$id";
	//die($qry);
	$res = mysql_query($qry,$conexion) or die(mysql_error());
	$tot = mysql_num_rows($res);
	if ($tot>0) {
		echo "<div id=\"villas_box\">";
     	echo "<div id=\"img_villa\">";
     	echo "<div id=\"controlsContainerSel\"></div>";
        echo "<div id=\"loadingContainerSel\"></div>";
        echo "<div id=\"imageContainerSel\"></div>";
        echo "<div id=\"thumbsContainerSel\">";
		echo "<div id=\"thumbsContainerSel\">";
        echo "<ul class=\"thumbs noscript\">";
          
		while ($row = mysql_fetch_array($res, MYSQL_NUM)) {
			echo "<li><a class=\"thumb\" href=\"imagen/libros/$row[0]\"><img src=\"imagen/libros/thumbnails/$row[0]\"/></a></li>";
		}
		echo "</ul></div></div></div>";

	} else {
		echo "&nbsp;";
	}
?>
